阅读更多

1顶
0踩

Web前端
在互联网盛行的今天,越来越多的在线用户希望得到安全可靠并且快速的访问体验。针对Web网页过于膨胀以及第三脚本蚕食流量等问题,Radware向网站运营人员提出以下改进建议,帮助他们为用户提供最快最优质的访问体验。



1.管理“页面膨胀”

页面大小与性能有着密切的关系。Radware最新电商性能“行业现状”报告显示,100强电商页面大小中位数达到了1492KB,比一年半之前增大了48%。

在研究报告里加载最快的10个页面中,页面包含的资源请求中位数为50个,页面大小中位数为556KB。而加载最慢的10个页面中,页面包含的资源请求中位数为141个,页面大小中位数为3289KB。换句话说,加载最慢的页面的资源中位数几乎是加载最快的页面的三倍,页面大小则是六倍。

仔细研究页面尺寸大小,我们可以得到更多的信息。加载最快的10个页面所包含的资源总数范围比较密集:在15个~72个之间;页面尺寸最小的仅为251KB,最大的2003KB。而加载最慢的10个页面所包含的资源总数范围则比较广泛:在89个~373个之间;页面尺寸最小为2073KB,最大的则超过了10MB。

2.进行图像优化

图像是造成页面膨胀的罪魁祸首之一,通常占据页面字节数的50-60%。在页面中添加图片或是将现有图片放大,是迅速获取用户并提高业务转化率的有效方式。但是这种方法会对性能造成严重的影响。

进行图像优化是提升性能最简单的一种方法,它可以使页面加载更快。为了更有效的完成图像渲染,图像必须经过压缩和整合、图像的尺寸和格式必须经过仔细调整,图像质量也必须经过优化,这样才可以依据图像的重要性进行区别化的加载处理。

3.控制第三方脚本

在典型的页面服务器请求中,来自于第三方脚本的请求占了其中的50%或更多。这些第三方脚本不仅会增加页面的字节数,带来延迟,而且也会成为Web页面中最大的潜在故障点。无响应、未经优化的第三方脚本会降低整个网络的加载速度。

解决办法是延迟第三方脚本的加载,将其放在关键页面内容之后进行加载,更为理想的情况是放在页面onLoad事件之后加载,这样才不会影响企业的搜索排名(谷歌将onLoad事件作为加载时间指标)。对于一些分析工具和第三方广告商而言,如果延迟第三方脚本加载的方法不可行,可以利用脚本的异步版本,与关键内容的加载同步进行。用户必须了解网站中有哪些脚本,删除那些无用的脚本,并对第三方脚本的性能进行持续监控。

4.真正做到移动设备优先

“移动设备优先”并不是一个全新的概念。早在2013年,移动设备的使用量就已经超过了台式机,然而与众多口头承诺的移动性能相比,真正专注于移动设备的开发还是存在一定的差距。例如,2011年11月,移动设备上的平均页面大小为475KB,现在则增长至897 KB。也就是说,在短短三年之间,平均页面大小几乎翻了一番。

尽管移动设备和网络取得了一些进展,但就性能而言,还是无法与大小已接近1MB的服务页面需求保持同步。我们知道,页面大小与加载时间息息相关,移动用户对缓慢的加载速度尤其敏感。如果企业希望网站可以真正做到“移动设备优先”,就必须正确处理这些问题。

5.在进行响应式Web设计时兼顾性能

响应式设计让设计人员和开发人员可以更好地控制Web页面的外观和感觉。它可以使跨多平台和设备上的页面变得更漂亮。但同时也会带来巨大的性能损失,这些性能损失并不能通过更快速的浏览器、网络和小工具得到缓解。而且随着时间的推移,这样影响还将持续恶化。

响应式设计建立在样式表和JavaScript之上。然而,低效的CSS和JS所带来的性能问题远远大于其设计优势给我们带来的好处。样式表应当放在HEAD文档中,用以实现页面的逐步渲染。然而,样式表却经常出现在页面其它位置,这就阻碍了页面的渲染速度。换句话说,JavaScript文件应当放在页面底部或在关键内容加载完成之后再被加载才是合理的处理方式。

6.实时监控性能

大家都知道要解决一个问题就必须先对问题有充分的了解。要解决页面性能问题,企业就必须知道用户在什么时候可以看到主要页面内容并与之进行交互;同时,企业还需了解性能和可用性问题是如何影响业务指标的。企业需要有方法获取实际的性能指标并对其进行分析。实时用户监控(RUM)工具可以从真实用户的角度实时获取、分析并记录网站的性能和可用性。

7.切勿过分依赖CDN解决所有性能问题

Radware季度电商性能“行业现状”报告中存在一项最具争议性的调查结果,即:使用内容分发网络(CDN)的网站完成主要内容渲染所需的时间比未曾使用CDN的网站要长的多。这是一个相关性问题,而非因果关系:通常情况下,相较于未使用CDN的网站,使用CDN的网站页面更大,也更复杂。页面的大小和复杂程度才是造成性能问题的元凶,而非CDN。但这一结果也表明,仅依靠CDN并不能解决所有的性能难题。

如果部署得当,CDN会是解决延迟问题非常有效的工具:缩短托管服务器接收、处理并响应图像、CSS文件等页面资源请求所需的时间。但是,延迟仅仅只是现代电商网站的关键问题之一。为了实现最佳的加速效果,网站运营人员可以采用组合解决方案:CDN+前端优化(如Radware FastView解决方案)+应用交付控制器(ADC)和内部管理。

8.在企业内部加强Web性能观念的宣传

大量研究证明,提高页面速度可以对所有的关键性能指标产生积极影响:页面访问量、用户粘连度、业务转化率、用户满意度、客户保持、购物车的内容多少和收入。

然而,正如上述7个建议中所表明的那样,许多企业都犯了同样的错误,最终损害了Web性能。目前,企业应该重点解决Web开发目标和在线业务目标之间的差距问题,而且,每个企业都应该至少拥有一个内部性能专家,以便更好的解决Web性能问题。
  • 大小: 124.6 KB
来自: 码农网
1
0
评论 共 1 条 请登录后发表评论
1 楼 haifengwuch 2015-02-04 22:18
  

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • PowerDesigner生成C#代码模板设置

    利用powerdesigner设计类图之后,可以直接生成对应语言的代码,对于设计开发非常有用。 这边记录下利用powerdesigner生成类时的一些注意事项。(Powerdesigner15.2) 一、属性访问器 .net支持如下的属性访问器写法public int PageIndex { get;

  • 使用PowerDesigner软件逆向生成C# .NET类图

    为了回复广大博友,这里用PowerDesigner软件逆向生成C# .NET类图实现两步操作即可,欢迎指正和添加新意! 1.菜单Tools-》Generate new Object-Oriented Model。在弹出的对话框“General”选项卡中选择语言为C#,“Selection”选项卡中选择要转换的实体。点确定后,PowerDesigner将添加一个新的工程,工程中的c

  • PowerDesigner16.5物理数据表生成C#实体类Model

    model实体类是什么: 在三层架构UI,BLL,DAL中,有时用户插入一条记录到数据库中,必然会有不少数据,按正常编程,也必然会一下子调用某个函数传入不少参数。为了减少参数的数量,达到高效简洁的效果,一般会用model实体类作为传输数据的载体。 model实体类一般对应着数据库里的字段,一个类实体对应一张表。比如:user数据表 有id,password,name,那么实体类usr也相应id

  • (转)用PowerDesigner12.5生成C#类包含属性的方法

    1.切换OOM模型2.选择菜单LanguageEdit Current Object Language3.修改Profile/Attribute/Templates/definition为下面第一代码即可 .if (%isGenerated%) and (%isValidAttribute%)[%comment%/n]/[%oidDocTag%/n]/

  • PowerDesigner 面向对象模型(OOM)说明

    一.     OOM 简介 Object-OrientedModel(OOM) 面向对象模型,一个OOM包含一系列包,类,接口 , 和他们的关系。 这些对象一起形成所有的 ( 或部份) 一个软件系统的逻辑的设计视图的类结构。 一个OOM本质上是软件系统的一个静态的概

  • Power Designer 转C#实体类方法

    1、打开Power Designer菜单Tools,选择如图 2、弹出方框中选择PD安装目录下的如图地址 3、object language选择正确目录后,可选如图语言,如C#。再填写name和code。 3、选择detail,看着需要勾选。确定完成。 4、打开生成后的PhysicalDiagram,菜单就会出现language选项,点击打开 edit curre...

  • powerDesiger uml class

    UML类图符号简介    1.类(Class): 使用三层矩形框表示。     第一层显示类的名称,如果是抽象类,则就用斜体显示。第二层是字段和属性。第三层是类的方法。注意前面的符号,+表示public,-表示private,#表示protected。   2.接口:UML类图符号中接口使用两层矩形框表示,与类图的区别主要是顶端有interface显示。第一行是接口名称。第二行是接口方法.

  • 基于模型自动生成测试用例工具研究

    AutoTCG简介 1.AutoTCG 是一款在线自动化测试用例设计平台,通过在线创建可视化测试模型,自动生成测试用例 2.AutoTCG采用先进的数学算法,可实现全面科学的测试覆盖 3.AutoTCG适用于嵌入式软件测试、web应用测试、移动app测试、桌面软件测试等多种自动化测试场景 主要功能 1、可视化建模 采用标准的BPMN2.0符号,可视化构建测试模型 简单便捷的模型设计器,快速构建测试模型 实时的模型自动检查功能,随时发现问题 支持子模型多层嵌套,分解复杂的业务逻辑 2、输入参数设计 分步骤

  • PowerDesigner(八)-面向对象模型(用例图,序列图,类图,生成Java源代码及Java源代码生成类图)

    面向对象模型   面向对象模型是利用UML(统一建模语言)的图形来描述系统结构的模型,它从不同角度实现系统的工作状态。这些图形有助于用户,管理人员,系统分析人员,开发人员,测试人员和其他人员之间进行信息交流。这里主要介绍用例图,序列图和类图。   1.面向对象模型OOM     面向对象模型是利用UML的图形描述系统结构的模型,可以利用PowerDesigner的面向对象模型进行创建。Pow

  • UML | Power Designer | 反向工程生成类图

    Power Designer下载: 官网下载:http://powerdesigner.de/en/trial-version-2/ 百度下载:http://rj.baidu.com/soft/detail/16619.html?ald反向工程生成类图:新建Model: File -> New Model -> Model types -> Object-Oriented Model -> C

  • C#操作PowerDesigner代码

    首先,程序的界面如下: 这里一定要使用OpenFileDialog控件,然后该页面代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; usin...

  • powerdesigner自动生成代码的修改

    powerdesigner自动生成代码的功能很是强大,但有时候不是很符合我们的想法,因此需要对其模板进行一些修改,如要将数据库中的表生成类文件时,我们需要的是property,但其为我们生成的代码里没有 get set ,所以我们需要手动修改一些代码.我修改的代码如下:profile-attribute-template-definition   .if (%isGenerat

  • 使用PowerDesigner进行代码生成

    很多代码生成器都选择了从表结构来生成领域模型,这样的方案有一个前提,就是领域模型和数据库表结构是同构的,也就是说领域模型中的类和数据库中的记录结构十分吻合,这样数据库表结构可以简单的直接映射到领域模型。 但是在业务逻辑比较复杂的情况下,对象方案和关系方案往往是不相配的,通常在两者之间有一个数据映射器来隔离两者,这时两者是相互不可见的,相互独立演变的。这样,基于表结构的代码生成领域模...

  • PowerDesigner 导出JAVA代码

    第一步:选择file-->new model, 在左侧窗口,选择 Model types,在 Model types 窗口选择Object-Oriented Model,在Diagram窗口选择:Class Diagram, 在下方的Model Name中输入一个名字,相当于项目名,在Object Language 中选择java(默认就是java),然后点击OK,如下图所示:   ...

  • C# 自动生成三层架构中的Model层.cs类方法

    由于开发ERP项目,有时候需要很多表,且表的字段比较多,写Model非常耗时,所以自己网上抄了一些资料,勉强写了一个自动生成代码的工具,现在分享主要技术点给大家参考,欢迎指正: 1、连接数据库 2、读取数据库中的表 3、选择生成之后.cs保存的路径以及生成的模板名 技术要点: 最后生成的文件: 里面的类型前面会有@  自始至终没有找到原因   各位若

  • 使用PowerDesigner16逆向工程生成pdm文件

    因为工作需要将目前库中所有的表结构导出,所以将操作过程记录下来,希望对同样有需要的人有所帮助。1.不多bb,先下一个PowerDesigner。    网上的资源大都是32位的,所以这里也以此位例来演示,下面所有的PowerDesigner都用pd来表示。2.安装完软件之后,我们需要先创建一个物理数据模型。    在进行这些操作之前我们需要准备的东西:    1.如果你的jdk是64位的,那么你需...

  • 使PowerDesigner12.5生成C#类包含属性的方法

    1.切换OOM模型2.选择菜单LanguageEdit Current Object Language3.修改Profile/Attribute/Templates/definition为下面第一代码即可.if (%isValidAttribute%)   [%comment%/n]/   [%customAttributes%/n]/   [%oidDocTag%/n]/    .if

Global site tag (gtag.js) - Google Analytics